<template>
  <div v-if="scanProgress.status !== 'idle'" class="scan-progress-container">
    <div class="progress-header">
      <h3>扫描进度</h3>
      <span class="status-badge" :class="scanProgress.status">
        {{ getStatusText() }}
      </span>
    </div>
    
    <div class="progress-bar-container">
      <div class="progress-bar">
        <div 
          class="progress-fill" 
          :style="{ width: scanProgress.progress + '%' }"
        ></div>
      </div>
      <span class="progress-text">{{ scanProgress.progress }}%</span>
    </div>
    
    <div class="current-step">
      {{ scanProgress.currentStep }}
    </div>
    
    <div v-if="scanProgress.totalSteps > 0" class="step-counter">
      步骤: {{ scanProgress.completedSteps }} / {{ scanProgress.totalSteps }}
    </div>
    
    <div v-if="scanProgress.status === 'completed' && scanProgress.result" class="result-summary">
      <p>扫描完成！</p>
      <p>做种文件: {{ scanProgress.result.total_seeding_files }}</p>
      <p>未做种文件: {{ scanProgress.result.total_not_seeding_files }}</p>
    </div>
    
    <div v-if="scanProgress.status === 'failed'" class="error-message">
      错误: {{ scanProgress.error }}
    </div>
    
    <button 
      v-if="scanProgress.status === 'completed' || scanProgress.status === 'failed'"
      @click="resetProgress"
      class="reset-button"
    >
      重置
    </button>
    
    <!-- 调试信息
    <div v-if="showDebug" class="debug-info">
      <h4>调试信息</h4>
      <pre>{{ JSON.stringify(scanProgress, null, 2) }}</pre>
    </div> -->
    
    <!-- 添加调试开关 -->
    <!-- <el-button size="small" @click="showDebug = !showDebug">
      {{ showDebug ? '隐藏' : '显示' }}调试信息
    </el-button> -->
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useClientStore } from '../stores/client'

const clientStore = useClientStore()
const router = useRouter()
const scanProgress = computed(() => clientStore.scanProgress)
const showDebug = ref(false)

// 监听扫描完成状态
watch(() => scanProgress.value.status, (newStatus) => {
  if (newStatus === 'completed') {
    ElMessage.success('扫描完成，正在跳转到报告页面...')
    setTimeout(() => {
      router.push('/report')
    }, 1000)
  } else if (newStatus === 'failed') {
    ElMessage.error('扫描失败：' + scanProgress.value.error)
  }
})

const getStatusText = () => {
  switch (scanProgress.value.status) {
    case 'running': return '运行中'
    case 'completed': return '已完成'
    case 'failed': return '失败'
    default: return '空闲'
  }
}

const resetProgress = () => {
  clientStore.resetScanProgress()
}
</script>

<style scoped>
.scan-progress-container {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status-badge.running {
  background: #e3f2fd;
  color: #1976d2;
}

.status-badge.completed {
  background: #e8f5e8;
  color: #2e7d32;
}

.status-badge.failed {
  background: #ffebee;
  color: #c62828;
}

.progress-bar-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.progress-bar {
  flex: 1;
  height: 20px;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  transition: width 0.3s ease;
}

.progress-text {
  font-weight: bold;
  min-width: 40px;
}

.current-step {
  color: #666;
  margin-bottom: 5px;
}

.step-counter {
  color: #888;
  font-size: 14px;
  margin-bottom: 10px;
}

.result-summary {
  background: #e8f5e8;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}

.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
}

.reset-button {
  background: #2196f3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.reset-button:hover {
  background: #1976d2;
}
</style>